<template>
    <div>
        <h1>编辑</h1>
        <table class="table">
            <tbody>
                <tr>
                    <td>会员编号</td>
                    <td>
                        {{ data.Id }}
                    </td>
                </tr>

                <tr>
                    <td>会员名称</td>
                    <td>
                        <input type="text" v-model="data.Name">
                    </td>
                </tr>

                <tr>
                    <td>会员密码</td>
                    <td>
                        <input type="password" v-model="data.Password">
                    </td>
                </tr>

                <tr>
                    <td>会员性别</td>
                    <td>
                        <input type="radio" name="sex" :value=1 v-model="data.Sex">男
                        <input type="radio" name="sex" :value=2 v-model="data.Sex">女
                    </td>
                </tr>

                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="date" v-model="data.Birthday">
                    </td>
                </tr>

                <tr>
                    <td>手机号</td>
                    <td>
                        <input type="text" v-model="data.PhoneNumber">
                    </td>
                </tr>

                <tr>
                    <td>年龄</td>
                    <td>
                        <input type="text" v-model="data.Age">
                    </td>
                </tr>

                <tr>
                    <td>状态</td>
                    <td>
                        <input type="checkbox" :value="true" v-model="data.State">打勾表示启用
                    </td>
                </tr>

                <tr>
                    <td>会员等级</td>
                    <td>
                    <select v-model="data.MemberLevelId">
            <option value=0>请选择</option>
            <option v-for="a in dtxlk" :value=a.Id>{{ a.LevelTitle }}</option>
        </select>
                    </td>
                </tr>

                <tr>
                    <td>上传图片</td>
                    <td>
                        <input type="file" @change="filss">
                        <img :src="'https://localhost:7141'+data.Img" style="width: 100px;height: 100px;">
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="更新" @click="Getuptr">
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute } from 'vue-router';

const data=ref({
    "Id": 0,
  "Name": "string",
  "Password": "string",
  "Sex": 0,
  "Birthday": "2025-04-01T12:36:47.754Z",
  "PhoneNumber": "string",
  "Age": 0,
  "IsDelete": true,
  "CreateDate": "2025-04-01T12:36:47.754Z",
  "State": true,
  "MemberLevelId": 0,
  "Img": "string"
})


//动态下拉框
const dtxlk=ref([{
    "Id": 1,
    "LevelTitle": "普通会员",
    "State": true
}])

//钩子
onMounted(() => {
    Getshow();
    Shows();
})

var router=useRoute();
var ids=router.query.id;

//反填
const Shows=()=>
{
    axios.get("https://localhost:7141/api/Mem/Getmember",{params:{id:ids}}).then(
        res=>{
            console.log(res);
            data.value=res.data;
            data.value.Birthday=moment( data.value.Birthday).format("YYYY-MM-DD");
        }
    )
}

//上传图片
const filss=(a:any)=>{
    var f=a.target.files[0];
    var fd=new FormData();
    fd.append("file",f);
    axios.post("https://localhost:7141/api/File/Findss",fd).then(
        res=>{
            data.value.Img=res.data;
        }
    )
}

//修改
const Getuptr=()=>
{
    if(data.value.State!=true){
        data.value.State=false;
    };
    console.log(data.value);
    debugger;
    axios.put("https://localhost:7141/api/Mem/UptMem",data.value).then(
        res=>{
            if(res.data>0){
                alert("修改成功");
                location.href='/';
            }else{
                alert("修改失败");
            }
        }
    )

}










//动态
const Getshow=()=>{
    axios.get("https://localhost:7141/api/Mem/Getlev").then(
        res=>{
            dtxlk.value=res.data; 
        }
    )
}

</script>

<style scoped>

</style>